<template>
	<div id="index">
		<a-layout>
			<a-config-provider :locale="language">
				<a-layout-header>
					<div id="topbar">
						<topBar @loginVisibleShow="getloginData" @registerVisibleShow="getregisterData"
							:isSearchPage="false">
						</topBar>
					</div>
				</a-layout-header>
				<a-layout-header>
					<div id="split-images">
						<a-image width="100%" height="100%" :src="$index.imgUrl+'split.png'" title=''
							description='始于初心,源于热爱' style="text-align: right;" :preview="false" draggable="false">
						</a-image>
					</div>
					<div id="typebar">
						<a-row id="typebar-leftnav" justify="space-between" align="center">
							<a-space :size="5" style="padding-left: 12%;padding-top: -2px;font-size: 15px;">
								<div class="leftnav-font">
									<i class="iconfont iconfont-new" style="font-size: 18px;" />
									<a draggable="false" href="#"><i class="web-font">新品速递</i></a>
								</div>
								<div class="leftnav-font">
									<i class="iconfont iconfont-good" style="font-size: 18px;" />
									<a draggable="false" href="#"><i class="web-font">好评现货</i></a>
								</div>
								<div class="leftnav-font">
									<i class="iconfont iconfont-love" style="font-size: 18px;" />
									<a draggable="false" href="#"><i class="web-font">好贴推荐</i></a>
								</div>
								<div class="line"></div>
							</a-space>
						</a-row>
						<a-row id="typebar-rightnav" justify="space-between" align="center">
							<a-space :size="10" style="padding-top: 3px;">
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">高达模型</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">变形金刚</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">科幻机甲</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">日系手办</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">特摄周边</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">美系周边</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">军事周边</i></a>
								</div>
								<div class="rightnav-font">
									<a draggable="false" href="#"><i class="web-font">潮流玩具</i></a>
								</div>
							</a-space>
						</a-row>
					</div>
				</a-layout-header>
				<a-layout-content>
					<div id="content">
						<a-layout-header>
							<a-row justify="space-between" align="center">
								<a-space :size="12" style="padding-left: 11%;padding-top: 1%;">
									<div id="left-carousel">
										<a-carousel id="carousel" :auto-play="!loginformVisible==!registerformVisible"
											indicator-type="dot" animation-name="fade" show-arrow="hover">
											<a-carousel-item v-for="(carouselItem,index) in newsList.carouselList"
												:key="index" style="border-radius: 5px;">
												<a-link v-if="carouselItem.isModel == 0 || carouselItem.isModel == 1"
													:href="'/modelEvaluating/' + carouselItem.id" :hoverable="false"
													draggable="false">
													<a-image class="scale-up-center" :src="carouselItem.src" width="600"
														height="305" style="margin-right: 67px;text-overflow: ellipsis;overflow: hidden;
														border-radius: 5px;" :title="carouselItem.title" :preview="false" draggable="false">
													</a-image>
												</a-link>
												<!--  -->
												<a-link v-else-if="carouselItem.isModel == 2" :href="carouselItem.href"
													:hoverable="false" draggable="false">
													<a-image class="scale-up-center" :src="carouselItem.src" width="600"
														height="305" style="margin-right: 67px;text-overflow: ellipsis;overflow: hidden;
													border-radius: 5px;" :title="carouselItem.title" :preview="false" draggable="false">
													</a-image>
												</a-link>
											</a-carousel-item>
										</a-carousel>
									</div>
									<div id="right-fourImages">
										<a-image-preview-group infinite>
											<a-space size=[10,5] wrap>
												<div style="border-radius: 5px;"
													v-for="(foutImageItem,index) in newsList.fourImagesList"
													:key="index">
													<a-link v-if="foutImageItem.isModel == 0 || foutImageItem.isModel == 1"
													 :href="'/modelEvaluating/' + foutImageItem.id"
														draggable="false" :hoverable="false">
														<a-image class="scale-in-hor-center" :src="foutImageItem.src"
															width="260" height="150" :preview="false"
															:title="foutImageItem.title" draggable="false" />
													</a-link>
													<!--  -->
													<a-link v-else-if="foutImageItem.isModel == 2" 
													:href="foutImageItem.href"
														draggable="false" :hoverable="false">
														<a-image class="scale-in-hor-center" :src="foutImageItem.src"
															width="260" height="150" :preview="false"
															:title="foutImageItem.title" draggable="false" />
													</a-link>
												</div>
												<!--  -->
											</a-space>
										</a-image-preview-group>
									</div>
								</a-space>
							</a-row>
						</a-layout-header>
						<a-layout-header>
							<!-- 推荐 -->
							<recommendList style="padding-top: 0.5%;" @indexData="getIndexData" :beginIndex="beginIndex"
								:endIndex="endIndex" :total="total" :formatrecommendsList="newsList.recommendsList">
								<template v-slot:title>
									资讯
								</template>
								<template v-slot:detail>
									情报资讯、品质资讯，新品抢鲜看
								</template>
							</recommendList>
						</a-layout-header>
						<!-- 新品速递 -->
						<a-layout-header>
							<newProductList style="padding-top: 0.5%;" :formatnewProductsList="newProductsList.data">
								<template v-slot:title>
									新品速递
								</template>
								<template v-slot:detail>
									猜你可能喜欢以下商品
								</template>
								<template v-slot:operation>
									<a-link class="link-style" href="#" draggable="false" :hoverable="false">更多</a-link>
								</template>
							</newProductList>
						</a-layout-header>
					</div>
				</a-layout-content>
				<a-layout-footer>
					<div id="footer">
						<a-back-top :visible-height="10" />
					</div>
				</a-layout-footer>
			</a-config-provider>
		</a-layout>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		provide
	} from 'vue';

	//国际化组件
	import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
	import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

	import topBar from '@/components/index/topBar.vue';
	import recommendList from '@/components/index/recommendList.vue';
	import newProductList from '@/components/index/newProductList.vue';
	import hotCommentList from '@/components/index/hotCommentList.vue';

	import apiUrl from '@/constant/index/apiUrl.js';
	import indexApi from '@/module/index/api/index.js';
	import jwt_decode from 'jwt-decode';

	let {
		proxy
	} = getCurrentInstance();
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	let language = ref(zhCN);

	let newsList = reactive({});

	let newProductsList = reactive({});

	let total = ref();
	let beginIndex = ref(7);
	let endIndex = ref(12);

	let loginformVisible = ref(false);
	let registerformVisible = ref(false);
	let uId = ref();

	function getIndexData(data) {
		console.log('data', data);
		beginIndex.value = data.PbeginIndex;
		endIndex.value = data.PendIndex;
		if (data.Ptotal > 12) {
			newsList.recommendsList = newsList.resp.data.slice(beginIndex.value, endIndex.value);
		} else {
			newsList.recommendsList = newsList.resp.data.slice(7, 12);
		}
	}

	function changeLanguage() {
		console.log('当前语言', language.value);
		if (language.value.locale != '' && language.value.locale != null && language.value.locale == 'zh-CN') {
			language.value = enUS;

			proxy.$i18n.locale = 'en';
		} else {
			language.value = zhCN;

			proxy.$i18n.locale = 'zh';
		}
		console.log('切换后语言', language.value);
	}

	function changeThemeColor() {
		if (document.body.getAttribute('arco-theme') == 'dark') {
			document.body.removeAttribute('arco-theme');
			document.documentElement.style.setProperty('--color-content', '#f4f4f4');
			document.documentElement.style.setProperty('--color-content-a', '#4c4c4c');
			document.documentElement.style.setProperty('--color-font', '#4c4c4c');

		} else {
			document.body.setAttribute('arco-theme', 'dark');
			document.documentElement.style.setProperty('--color-content', '#4c4c4c');
			document.documentElement.style.setProperty('--color-content-a', '#f4f4f4');
			document.documentElement.style.setProperty('--color-font', '#f4f4f4');
		}
	}

	function splitNewsList() {
		newsList.carouselList = newsList.resp.data.slice(0, 3);
		newsList.fourImagesList = newsList.resp.data.slice(3, 7);

		total.value = newsList.resp.total;
		if (total.value > 12) {
			newsList.recommendsList = newsList.resp.data.slice(beginIndex.value, endIndex.value);
		} else {
			newsList.recommendsList = newsList.resp.data.slice(7, 12);
		}
		console.log('newsList.carousel', newsList.carouselList)
		console.log('newsList.fourImagesList', newsList.fourImagesList);
		console.log('newsList.recommendsList', newsList.recommendsList);
		console.log('total', total.value);
	}

	async function loadingNewsList() {
		newsList.resp = await indexApi.getNewsList();
		splitNewsList();
		console.log('newsList', newsList.resp);
		return newsList;
	}

	async function loadingNewProductsList() {
		if (sessionStorage.getItem("token")) {
			uId.value = jwt_decode(sessionStorage.getItem("token")).uid;
			if (uId.value) {
				newProductsList.resp = await indexApi.getNewProductsListByuId(uId.value);
				newProductsList.data = newProductsList.resp.data;
				console.log('newProductsList:', newProductsList.data);
				console.log('newProductsList', newProductsList.resp);
			} else {
				newProductsList.resp = await indexApi.getNewProductsList();
				newProductsList.data = newProductsList.resp.data;
				console.log('newProductsList:', newProductsList.data);
				console.log('newProductsList', newProductsList.resp);
			}
		} else {
			newProductsList.resp = await indexApi.getNewProductsList();
			newProductsList.data = newProductsList.resp.data;
			console.log('newProductsList:', newProductsList.data);
			console.log('newProductsList', newProductsList.resp);
		}
		return newProductsList;
	}

	function getloginData(data) {
		loginformVisible.value = data;
		console.log('loginVisable', data);
	}

	function getregisterData(data) {
		registerformVisible.value = data;
		console.log('registerVisable', data);
	}

	let addCartGoodStatus = ref(false);
	provide('flushShoppingCart', addCartGoodStatus);
	//获取添加商品的状态
	function getCartGood(data) {
		console.log('status', data);
		addCartGoodStatus.value = data;
	}
	
	function loadStatus(){
		if (route.params.status == 'error')
			proxy.$message.error('请登录');
		else if(route.params.status == 'unauth')
			proxy.$message.error('你没有访问的权限');
		else if(route.params.status == '注销成功')
			proxy.$message.success('注销成功');
	}

	onMounted(() => {
		console.log('index的onMounted执行了');
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingNewsList();
		loadingNewProductsList();
		loadStatus();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/index/css/index.less';
</style>
